<template>
  <div class="login">
      <div class="headline">
          <h2>登录</h2>
      </div>
      <div class="logo">
          <img src="../../assets/LOGO@3x.png" alt="">
      </div>
      <div class="account">
          <input class="mint-field-core" autocomplete="off" maxlength="11" placeholder="请输入手机号" type="tel" v-model="form.tel">
          <input  class="mint-field-core last-input" autocomplete="off" maxlength="15" placeholder="请输入密码" type="password" v-model="form.password">
          <div class="forget-btn f_r">
              <router-link to="/forget">忘记密码?</router-link>
          </div>
          <mt-button @click="submit" class="main-bgc" type="default">登录</mt-button>
          <router-link class="register-btn" to="/register">
          <span class="mian-color">没有一生教育账号?去注册</span></router-link>
      </div>
      <!-- <div class="rest-login">
          <div>
              <span></span>
              <span>第三方登录</span>
              <span></span>
          </div>
          <img src="../../assets/微信@3x.png" alt="">
      </div> -->
  </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                tel: '',
                password: ''
            }
        }
    },
    created() {
        let loginCookie = this.utils.cookie('get','user');
        if(loginCookie){
            this.$router.push({path:'/home'})
        }
    },
    methods: {
        submit() {
            if (!/^1[3|4|7|5|8]\d{9}$/.test(this.form.tel)) {
                return alert('请输入正确的手机号')
            }
            if (!/^[a-zA-Z0-9]{6,15}$/.test(this.form.password)) {
                return alert('请输入正确的密码')
            }
            this.form.password = md5(this.form.password) + 'Ysjymd@5'
            this.form.password = md5(this.form.password)
            this.utils.$post(
                this.utils.SGIN_USER,
                data => {
                    if (data.data) {
                        this.$router.push({ path: '/home' })
                    }
                },
                this.form
            )
        }
    }
}
</script>

<style lang="less">
@mainColor: #00d8c9;
.login {
    .login-btn {
        width: 100%;
        padding: 0.2rem 0 0.6rem;
        text-align: center;
        font-size: 0.3rem;
    }
    .logo {
        width: 100%;
        padding: 0 0 1.2rem;
        > img {
            display: block;
            width: 1.5rem;
            height: 1.6rem;
            margin: 0 auto;
        }
    }
    .account {
        padding: 0 0.6rem;
        .mint-field-core {
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #e5e5e5;
            color: #333;
            font-size: 0.28rem;
            padding-bottom: 0.16rem;
            &:focus {
                border-bottom: 1px solid @mainColor;
            }
        }
        .last-input {
            margin: 0.8rem 0 0.2rem;
        }
        .forget-btn {
            > a {
                color: #999;
                font-size: 0.24rem;
            }
        }
        .mint-button--normal {
            color: #fff;
            background-color: @mainColor;
            width: 100%;
            margin-top: 1rem;
            height: 0.8rem;
            border-radius: 50px;
        }
        .register-btn {
            display: block;
            width: 100%;
            margin-top: 0.4rem;
            > span {
                display: block;
                text-align: center;
                font-size: 0.24rem;
                color: @mainColor;
            }
        }
    }
    .rest-login {
        padding: 0 0.6rem;
        margin-top: 2rem;
        span {
            display: inline-block;
            &:nth-child(1) {
                width: 1.9rem;
                border-bottom: 1px solid #ccc;
            }
            &:nth-child(2) {
                margin: 0 0.4rem;
                font-size: 0.24rem;
                color: #999;
            }
            &:nth-child(3) {
                width: 1.9rem;
                border-bottom: 1px solid #ccc;
            }
        }
        > img {
            width: 0.7rem;
            height: 0.7rem;
            display: block;
            margin: 0.4rem auto 0.6rem;
        }
    }
}
</style>